// Override base Dojo styles
.claro {
   .dijitMenu {
      border-color: @standard-border-color;
   }
   .dijitSelect .dijitInputField, .dijitTextBox .dijitInputField {
      padding: 2px 4px;
   }
}

// Main CSS
.alfresco-forms-controls-BaseFormControl {

   &--disabled {
      opacity: @disabled-form-field-opacity;
   }

   margin-bottom: @standard-line-height;
   // BEM CSS
   &__validation-error {
      display: none;
      height: 16px;
      margin: 0 4px;
      width: 16px;
      line-height: 20px;
      vertical-align: text-bottom;
   }
   &__validation-warning {
      display: none;
      height: 16px;
      margin: 0 4px;
      width: 16px;
      line-height: 20px;
      vertical-align: text-bottom;
   }
   &--no-label {
      > .title-row {
         display: none;
      }
   }
   &--invalid {
      > .title-row {
         display: block;
         > .alfresco-forms-controls-BaseFormControl__validation-error {
            display: inline-block;
         }
         > span.validation-message {
            display: inline-block;
         }
      }
   }
   &--warning {
      > .title-row {
         display: block;
         > .alfresco-forms-controls-BaseFormControl__validation-warning {
            display: inline-block;
         }
         > span.validation-message {
            display: inline-block;
         }
      }
   }
   // Legacy CSS
   > .description-row {
      max-width: @dialog-control-section;
      > .description {
         color: @de-emphasized-font-color;
         font-size: @small-font-size;
         line-height: ceil(@small-font-size/@standard-line-height) * @standard-line-height;
         margin: 0 0 @standard-line-height 0;
      }
   }
   &__warning-row {
      max-width: @dialog-control-section;

      &__warning {
         color: @validation-warning-font-color;
         line-height: ceil(@small-font-size/@standard-line-height) * @standard-line-height;
         margin: 0 0 @standard-line-height 0;
      }
   }

   &.hiddenlabel > .title-row {
      height: 0;
      left: -999em;
      position: absolute;
   }
   > .control-row {
      display: inline-block;
   }
   > .control-row > .control {
      display: inline-block;
      margin-right: 10px;
   }
   > .title-row {
      display: block;
      > label {
         display: inline-block;
         font-size: @normal-font-size;
         line-height: ceil(@normal-font-size/@standard-line-height) * @standard-line-height;
      }
      > .requirementIndicator {
         display: none;
         &.required {
            display: inline-block;
         }
      }
      > img.validationInProgress {
         height: 16px;
         margin: 2px 0;
         vertical-align: top;
         width: 16px;
         &.hidden {
            display: none;
         }
      }
      > img.inlineHelp {
         cursor: pointer;
         height: 16px;
         margin: 2px 0;
         vertical-align: top;
         width: 16px;
         &.hidden {
            display: none;
         }
      }
      > .validation-message {
         color: @validation-error-font-color;
         display: none;
         font-size: @normal-font-size - 3;
         margin: 0;
         width: @dialog-label-section;
      }
   }
   > .units {
      margin-top: 5px;
   }
   > .clear-both {
      clear: both;
   }
   &.long > .control-row > div.control > div {
      width: 472px;
   }

   &--validation-hidden {
      > .title-row {
         .alfresco-forms-controls-BaseFormControl__validation-error,
         .requirementIndicator.required,
         .validation-message,
         .validationInProgress {
            display: none;
         }
      }
   }

   div.control {
      div.dijitComboBox.dijitTextBoxHover, .dijitTextBoxHover, .dijitTextAreaHover, .dijitTextBoxFocused, .dijitTextAreaFocused, .dijitTextBoxActive, .dijitTextAreaActive {
         background-color: inherit;
         background-image: none;
         border-color: @hover-border-color;
      }
      .dijitPlaceHolder {
         color: @de-emphasized-font-color;
         font-style: normal;
      }
      div.dijitComboBox {
         border-color: @standard-border-color;
      }
      div.dijitComboBox.dijitTextBoxFocused, .dijitActive, .dijitFocused {
         border-color: @focused-border-color;
      }
   }
}

// Special layout
.unmargined {
   .alfresco-forms-controls-BaseFormControl {
      margin-bottom: 0;
      > .clear-both {
         height: 0;
      }
   }
}

// Customised layout within dialog
.alfresco-dialog-AlfDialog {
   .dialog-body {
      .alfresco-forms-Form.root-dialog-form {
         > form {
            > .alfresco-forms-controls-BaseFormControl:first-child {
               margin-top: 5px;
            }

            > .alfresco-forms-controls-BaseFormControl {
               min-width: @dialog-control-section + 2;
               > .description-row > .description {
                  margin: 0 0 @standard-line-height @dialog-label-section + 4;
               }
               > .alfresco-forms-controls-BaseFormControl__warning-row {
                  > .alfresco-forms-controls-BaseFormControl__warning-row__warning {
                     margin: 0 0 @standard-line-height @dialog-label-section + 4;
                  }
               }
               > .title-row {
                  display: inline;
                  float: left;
                  margin-right: 8px;
                  margin-top: 2px;
                  text-align: right;
                  width: @dialog-label-section - 4;
                  > .label {
                     word-break: break-word
                  }
                  > label:after {
                     content: ":";
                  }
                  > .validation-message {
                     margin: 7px 0 0 -5px;
                  }
               }
               &--no-label {
                  > .title-row {
                     display: none;

                     > label:after {
                        content: "";
                     }
                  }
                  > .description-row {
                     > .description {
                        margin: 0;
                     }
                  }
                  > .alfresco-forms-controls-BaseFormControl__warning-row {
                     > .alfresco-forms-controls-BaseFormControl__warning-row__warning {
                        margin: 0;
                     }
                  }
               }
               &--invalid {
                  > .title-row {
                     display: block;
                     > span.validation-message {
                        display: block;
                     }
                  }
                  > .description-row {
                     > .description {
                        margin: 0 0 @standard-line-height @dialog-label-section + 4;
                     }
                  }
                  > .alfresco-forms-controls-BaseFormControl__warning-row {
                     > .alfresco-forms-controls-BaseFormControl__warning-row__warning {
                        margin: 0 0 @standard-line-height @dialog-label-section + 4;
                     }
                  }
               }
               &--validation-hidden {
                  > .title-row {
                     span.validation-message {
                        display: none;
                     }
                  }
               }
               &--validation-hidden.alfresco-forms-controls-BaseFormControl--no-label {
                  > .title-row {
                     display: none;
                  }
                  > .control-row {
                     width: initial;
                  }
                  > .description-row {
                     > .description {
                        margin: 0;
                     }
                  }> .alfresco-forms-controls-BaseFormControl__warning-row {
                     > .alfresco-forms-controls-BaseFormControl__warning-row__warning {
                        margin: 0;
                     }
                  }
               }
               > .control-row {
                  width: ~"calc(100% -" @dialog-label-section ~"- 10px)";
               }
            }
         }
      }
   }
   &--no-min-width {
      .dialog-body {
         .alfresco-forms-Form.root-dialog-form {
            > form {
               > .alfresco-forms-controls-BaseFormControl {
                  min-width: 0
               }
            }
         }
      }
   }
}